<template>
  <div class="dashboard-page">
    <div class="page-left">
      <div class="card-item">
        <img src="@/assets/img/dashboard/interaction.png" alt="互动课程" />
        <div class="label">互动课程</div>
        <n-button type="primary" size="large" @click="startCourseTap">开始授课</n-button>
      </div>
    </div>
    <div class="page-right">
      <div class="card-item" @click="linkTap('classroomRecord')">
        <img src="@/assets/img/dashboard/classroom-record.png" alt="课堂记录" />
        <div class="label">课堂记录</div>
        <div class="link-btn">
          立即查看
          <n-icon size="30"><ChevronForwardOutline /></n-icon>
        </div>
      </div>
      <div class="card-item" @click="linkTap('studentRecord')">
        <img src="@/assets/img/dashboard/student-record.png" alt="学员记录" />
        <div class="label">学员记录</div>
        <div class="link-btn">
          立即查看
          <n-icon size="30"><ChevronForwardOutline /></n-icon>
        </div>
      </div>
      <div class="card-item" @click="linkTap('more')">
        <img src="@/assets/img/dashboard/developing.png" alt="更多功能" />
        <div class="label">更多功能</div>
        <div class="link-btn"> 开发中尽情期待 </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ChevronForwardOutline } from '@vicons/ionicons5';
  import { closeCourse, startCourse } from '@/api/dashboard';
  import { useCourse } from '@/store/modules/course';

  async function startCourseTap() {
    const res = await startCourse();
    if (res.code === 180002) {
      // 存在未结束的课程
      window['$dialog'].warning({
        title: '警告',
        content: '当前课程未结束，是否继续？',
        positiveText: '继续上课',
        negativeText: '开始新课程',
        onPositiveClick: () => {
          useCourse().setPageRoute('matching');
          // router.push({
          //   name: 'CourseMatching',
          // });
        },
        onNegativeClick: async () => {
          try {
            await closeCourse();
            const r1 = await startCourse();
            useCourse().setPageRoute('matching');
            useCourse().setCurrentCourseData({
              courseId: r1,
              courseStartTime: Date.now()
            })
            // router.push({
            //   name: 'CourseMatching',
            // });
          } catch (e) {
            window['$message'].error('开始新课程失败');
          }
        },
      });
    } else {
      useCourse().setPageRoute('matching');
      useCourse().setCurrentCourseData({
        courseId: res,
        courseStartTime: Date.now()
      })
      // router.push({
      //   name: 'CourseMatching',
      // });
    }
  }
  function linkTap(routeName: string) {
    if (routeName === 'more') {
      window['$message'].info('更多功能 开发中敬请期待');
    } else {
      useCourse().setPageRoute(routeName);
      // router.push({
      //   name: routeName,
      // });
    }
  }
</script>

<style scoped lang="less">
  .dashboard-page {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .page-left {
      width: 1164px;
      height: 100%;
      .card-item {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 582px;
          height: 358px;
        }
        .label {
          font-size: 48px;
          line-height: 68px;
          color: #1e232b;
          margin: 16px 0 38px;
        }
        .n-button {
          font-size: 36px;
          width: 282px;
          height: 84px;
          border-radius: 12px;
        }
      }
    }
    .page-right {
      width: 648px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-item {
        height: 276px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        //align-items: center;
        position: relative;
        padding: 42px 288px 42px 60px;
        cursor: pointer;
        img {
          width: 192px;
          height: 192px;
          position: absolute;
          right: 48px;
          top: 50%;
          margin-top: -96px;
        }
        .label {
          font-size: 48px;
          line-height: 60px;
          color: #1e232b;
          margin-bottom: 16px;
        }
        .link-btn {
          color: #9ba2aa;
          font-size: 30px;
          line-height: 40px;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }
    .card-item {
      background: rgba(255, 255, 255, 0.65);
      box-shadow: 0 8px 36px 0 rgba(219, 143, 88, 0.09);
      border-radius: 24px;
    }
  }
</style>
